<template>
  <div class="vuln-environment-list">
    <div class="header-actions">
      <h1>漏洞验证环境列表</h1>
      <el-select v-model="statusFilter" placeholder="全部状态" clearable @change="handleFilterChange">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>

    <el-table v-loading="loading" :data="environmentList" border style="width: 100%">
      <el-table-column prop="name" label="环境名称" min-width="150" />
      <el-table-column prop="vulnId" label="漏洞ID" min-width="150" />
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusTypeClass(row.status)" size="small">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button 
            v-if="row.status === 'stopped'" 
            type="success" 
            size="small" 
            :loading="row.actionLoading" 
            @click="handleStartEnvironment(row)"
          >
            启动
          </el-button>
          <el-button 
            v-if="row.status === 'running'" 
            type="danger" 
            size="small" 
            :loading="row.actionLoading" 
            @click="handleStopEnvironment(row)"
          >
            停止
          </el-button>
          <el-button 
            type="primary" 
            size="small"
            @click="handleViewDetails(row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getVulnEnvironmentList, 
  startVulnEnvironment, 
  stopVulnEnvironment 
} from '@/api/vulnEnvironment'

const router = useRouter()

// 状态选项
const statusOptions = [
  { value: 'running', label: '运行中' },
  { value: 'stopped', label: '已停止' },
  { value: 'error', label: '错误' }
]

// 数据和加载状态
const loading = ref(false)
const environmentList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const statusFilter = ref('')

// 获取环境列表
const fetchEnvironmentList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    }
    
    if (statusFilter.value) {
      params.status = statusFilter.value
    }
    
    const { data } = await getVulnEnvironmentList(params)
    environmentList.value = data.items.map(item => ({
      ...item,
      actionLoading: false
    }))
    total.value = data.total
  } catch (error) {
    console.error('获取漏洞验证环境列表失败', error)
    ElMessage.error('获取漏洞验证环境列表失败')
  } finally {
    loading.value = false
  }
}

// 处理状态过滤变化
const handleFilterChange = () => {
  currentPage.value = 1
  fetchEnvironmentList()
}

// 处理分页变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchEnvironmentList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchEnvironmentList()
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    running: '运行中',
    stopped: '已停止',
    error: '错误'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类型
const getStatusTypeClass = (status) => {
  const statusTypeMap = {
    running: 'success',
    stopped: 'info',
    error: 'danger'
  }
  return statusTypeMap[status] || 'info'
}

// 启动环境
const handleStartEnvironment = async (row) => {
  try {
    row.actionLoading = true
    await startVulnEnvironment(row.id)
    ElMessage.success('环境启动成功')
    // 刷新当前行状态
    row.status = 'running'
  } catch (error) {
    console.error('启动环境失败', error)
    ElMessage.error('启动环境失败')
  } finally {
    row.actionLoading = false
  }
}

// 停止环境
const handleStopEnvironment = async (row) => {
  try {
    row.actionLoading = true
    await stopVulnEnvironment(row.id)
    ElMessage.success('环境停止成功')
    // 刷新当前行状态
    row.status = 'stopped'
  } catch (error) {
    console.error('停止环境失败', error)
    ElMessage.error('停止环境失败')
  } finally {
    row.actionLoading = false
  }
}

// 查看详情
const handleViewDetails = (row) => {
  router.push({ 
    name: 'EnvironmentMonitor', 
    params: { id: row.id } 
  })
}

// 组件挂载时加载数据
onMounted(() => {
  fetchEnvironmentList()
})
</script>

<style lang="scss" scoped>
.vuln-environment-list {
  padding: 20px;
  
  .pagination-container {
    margin-top: 20px;
  }
}</style> 